<script lang="ts" setup>
import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import {
  Form,
  FormItem,
  Input,
  message,
  Radio,
  RadioGroup,
  Select,
} from 'ant-design-vue';

import {
  getAdminInfoApi,
  getRoleAllApi,
  storeAdminApi,
  updateAdminApi,
} from '#/api';

const gridApi = ref();
const record = ref();
const formRef = ref();
const options = ref();

const labelCol = { span: 5 };
const wrapperCol = { span: 17 };

interface FormData {
  username: string;
  account: string;
  password: string;
  status: number;
  roles: string[];
}

const formData = reactive<FormData>({
  username: '',
  account: '',
  password: '',
  status: 1,
  roles: [],
});

const rules = {
  username: [{ required: true, message: '请输入管理员名称', trigger: 'blur' }],
  account: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
  roles: [{ required: true, message: '请选择管理员角色', trigger: 'blur' }],
};

const [Modal, modalApi] = useVbenModal({
  // 重置表单
  onBeforeClose() {
    formRef.value.resetFields();
  },
  // 取消按钮
  onCancel() {
    modalApi.close();
  },
  // 确认提交
  onConfirm() {
    // 表单验证
    formRef.value.validate().then(() => {
      modalApi.setState({ loading: true, confirmLoading: true });
      const data = formData;
      const id = record.value.id;
      const Api = id ? updateAdminApi(id, data) : storeAdminApi(data);
      Api.then(() => {
        message.success('操作成功');
        gridApi.value?.reload();
        modalApi.close();
      }).finally(() => {
        modalApi.setState({ loading: false, confirmLoading: false });
      });
    });
  },
  // 打开抽屉回调
  onOpenChange(isOpen: boolean) {
    record.value = isOpen ? modalApi.getData()?.record || {} : {};
    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
    if (isOpen) {
      getRoleAllApi().then((data) => {
        options.value = data;
      });
      if (record.value.id && record.value) {
        getAdminInfoApi(record.value.id).then((data) => {
          // [0=>"1", 1=>"2"] 把数组字符串转为整数
          data.roles = data.roles.map(Number);
          Object.assign(formData, data);
        });
        rules.password = [];
      } else {
        rules.password = [
          { required: true, message: '请输入管理员密码', trigger: 'blur' },
          { min: 6, message: '密码必须至少 6 个字符', trigger: 'blur' },
        ];
      }
    }
  },
});
</script>
<template>
  <Modal class="w-[700px]">
    <Form
      ref="formRef"
      :label-col="labelCol"
      :model="formData"
      :rules="rules"
      :wrapper-col="wrapperCol"
    >
      <FormItem label="管理员名称" name="username">
        <Input v-model:value="formData.username" />
      </FormItem>
      <FormItem label="管理员账号" name="account">
        <Input v-model:value="formData.account" />
      </FormItem>
      <FormItem label="管理员密码" name="password">
        <Input v-model:value="formData.password" />
      </FormItem>
      <FormItem label="角色组" name="roles">
        <Select
          v-model:value="formData.roles"
          :field-names="{ label: 'name', value: 'id' }"
          :options="options"
          mode="multiple"
        />
      </FormItem>
      <FormItem label="状态" name="status">
        <RadioGroup v-model:value="formData.status">
          <Radio :value="1">正常</Radio>
          <Radio :value="0">禁用</Radio>
        </RadioGroup>
      </FormItem>
    </Form>
  </Modal>
</template>
